<script>
  // Slider handler

  function sliderHandler() {
    var sliders = document.getElementsByClassName('slider');

    for (var i = 0; i < sliders.length; i++) {
      var slider_id         = sliders[i].getAttribute('id');
      var action_button     = document.querySelector('[data-activates=' + slider_id + ']');
      action_button.onclick = function () {
        event.stopPropagation();
        var name = this.getAttribute('data-activates');
        document.getElementById(name).classList.add('opened');
        document.getElementById(name).style.transform = 'translateX(0)';
        wnidowClickHandler();
      };
    }
  }

  function wnidowClickHandler() {
    // when user click outside window close it
    window.onclick = function (event) {
      var element = document.getElementsByClassName('slider opened');
      var name    = element[0].getAttribute('id');
      if (element.length) {
        if (event.target !== element[0] && !element[0].contains(event.target)) {
          document.getElementById(name).classList.remove('opened');
          if (document.getElementById(name).classList.contains('slider--right')) {
            document.getElementById(name).style.transform = 'translateX(105%)';
          } else {
            document.getElementById(name).style.transform = 'translateX(-105%)';
          }
          window.onclick = null;
        }
      }
    };
  }

  sliderHandler();
</script>
